import React, { Component } from 'react'
import PropTypes from 'prop-types'

import './comment-add.css';
class CommentAdd extends Component {
    
    static propTypes={
        addcomment:PropTypes.func.isRequired
    }
    state={
        username:"",
        content:""
    }
    myclick = ()=>{
        const { addcomment } = this.props
        const comment = this.state;
        addcomment(comment);
        this.setState({username:"",content:""})
    }
    chgname = (event)=>{
        let username = event.target.value;
        this.setState({username})
    }
    chgcont = (event)=>{
        let content = event.target.value;
        this.setState({content})
    }
    render() {        
        const { username,content } = this.state
        return (
            <div className="col-md-4">
                <form className="form-horizontal">
                    <div className="form-group">
                        <label>用户名</label>
                        <input type="text" className="form-control" value={username} onChange={this.chgname} placeholder="用户名" />
                    </div>
                    <div className="form-group">
                        <label>评论内容</label>
                        <textarea className="form-control" rows="6" value={content} onChange={this.chgcont} placeholder="评论内容"></textarea>
                    </div>
                    <div className="form-group">
                        <div className="col-sm-offset-2 col-sm-10">
                            <button type="button" onClick={this.myclick} className="btn btn-default pull-right">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        )
    }
}

export default CommentAdd
